<template>
  <div class="app-container">
    <search-box :isMulti="false">
      <template slot="content">
        <div class="left-box">

          <el-form-item label="用户姓名：">
            <el-input v-model="listQuery.userName"
                      placeholder="请输入"
                      clearable/>
          </el-form-item>


        </div>
        <div class="right-box">


          <el-button size="mini"
                     @click="handleFilter">查询
          </el-button>
          <el-button size="mini" type="info"
                     @click="reset">重置
          </el-button>
        </div>
      </template>
    </search-box>
    <div class="table-wrap">
      <el-table :data="list"
                style="width:100%"
                element-loading-text="Loading"
                height="600"  width="150">
        <el-table-column
          type="index"
          width="50"
          label="序号"
        ></el-table-column>
        <el-table-column prop="userName"
                         label="用户姓名" >
        </el-table-column>

        <el-table-column prop="userAccount"
                         label="用户账号" >
        </el-table-column>

        <el-table-column prop="userAddress"
                         label="收货地址">
        </el-table-column>
        <el-table-column prop="linkName"
                         label="联系人">
        </el-table-column>

        <el-table-column prop="linkTel"
                         label="联系电话">
        </el-table-column>
        <el-table-column prop="createDate"
                         label="创建时间" value-format="yyyy-MM-dd">
        </el-table-column>


      </el-table>
      <pagination v-show="total>0"
                  :total="total"
                  :page.sync="listQuery.pageNumber"
                  :limit.sync="listQuery.pageSize"
                  @pagination="getList"/>
    </div>


    <!--    //dialog弹窗 在页面的最后一个</div>的上面-->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      style="margin-top: -3%"
      width="30%"
      >
      <el-form ref="form" :model="form" :rules = 'rules' label-width="100px">
        <el-form-item label="用户昵称" prop="userName">
          <el-input v-model="form.userName"></el-input>
        </el-form-item>
        <el-form-item label="用户账号" prop="userAccount">
          <el-input v-model="form.userAccount"></el-input>
        </el-form-item>
        <el-form-item label="用户密码" prop="userPassword">
          <el-input v-model="form.userPassword"></el-input>
        </el-form-item>
        <el-form-item label="用户类型" prop="userType">
          <el-select v-model="form.userType" placeholder="请选择用户类型">
            <el-option
              v-for="item in usersTypeList"
              :key="index"
              :label="item.userTypeName"
              :value="item.userType">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提 交</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">

  </span>

    </el-dialog>




  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { quillEditor } from 'vue-quill-editor'//添加富文本编辑器
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'

  import waves from '@/directive/waves' // waves directive
  import Pagination from '@/components/Pagination' // secondary package based on el-pagination
  // 当然你也可以为了方便使用，将它注册到全局
  import bus from '@/utils/eventBus'
  import searchBox from '@/components/searchBox.vue'
  import * as users from '@/api/personal/users'
  import * as usersType from '@/api/personal/usersType'
  import * as userInfo from '@/api/userInfo/userInfo'

  export default {
    name: 'AdminUser',
    components: { Pagination, searchBox, quillEditor },
    directives: { waves },
    filters: {},
    data() {
      return {
        content: '',
        editorOption: {},
        list: null,
        usersTypeList: null,
        areaList: null,
        total: 0,
        listQuery: { // 查询列表时的参数对象
          pageNumber: 1,
          pageSize: 50,
          appName: process.env.VUE_APP_APP_NAME,
          tenantIdList: []
        },
        dialogVisible: false,
        dialogVisibleDesc: false,
        dialogTitle:'',
        form:{
          userName : '',
          userAccount : '',
          userPassword : '',
          userTypeName: '',
          userType:'',
        },

        rules: {
          userName: [{ required: true, message: '用户昵称必填', trigger: 'blur' }],
          userAccount: [{ required: true, message: '用户账号必填', trigger: 'blur' }],
          userPassword: [{ required: true, message: '用户密码必填', trigger: 'blur' }],
          userType: [{ required: true, message: '用户类型必选', trigger: 'blur' }],
        }
      }
    },
    computed: {
      ...mapGetters([
        'selectedTenantId',
        'tenantList'
      ])
    },
    created() {

      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
      this.getList()

      // 监听 租户改变的事件,选择不同租户后,立马刷新数据
      bus.$on('selectedTenantIdChanged', () => {
        console.log('selectedTenantIdChanged事件触发...')
        this.getList()
      })
    },
    mounted() {

    },
    beforeDestroy() { // 当路由切换到其他页面时触发
      bus.$off('selectedTenantIdChanged')
    },
    methods: { //所有的方法写在当前钩子函数下

      onEditorReady(editor) {
      },

      async getList() { // 获取列表数据
        this.listQuery.tenantIdList = []
        if (this.selectedTenantId == undefined) {//当前选中所有的租户
          this.tenantList.forEach((tenant, index) => {
            this.listQuery.tenantIdList.push(tenant.id)
          })
        } else {
          this.listQuery.tenantIdList.push(this.selectedTenantId)
        }
        const { content } = await userInfo.getUserAddressInfoList(this.listQuery)
        this.list = content.list
        this.total = content.totalCounts
      },

      async getUsersTypeList() { // 获取列表数据
        this.listQuery.tenantIdList = []
        if (this.selectedTenantId == undefined) {//当前选中所有的租户
          this.tenantList.forEach((tenant, index) => {
            this.listQuery.tenantIdList.push(tenant.id)
          })
        } else {
          this.listQuery.tenantIdList.push(this.selectedTenantId)
        }
        const { content } = await usersType.getUsersTypeList(this.listQuery)
        this.usersTypeList = content.list
      },
      handleFilter() {
        this.listQuery.pageNumber = 1
        this.getList()
      },

      //新增数据
      handleCreate() {
        this.dialogVisible = true
        this.dialogTitle='新增'
        this.form = {}
        this.getUsersTypeList()
      },
      //编辑数据
      handleUpdate(row) {
        this.getUsersTypeList()
        this.dialogVisible = true
        this.dialogTitle='编辑';
        this.form = row;

      },
      //删除数据
      handleDelete(row) {

        this.$confirm('是否删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          users.deleteUsersInfo(row).then(() => {
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
            this.getList()
          })
        }).catch(() => {
        })
      },


      handleLookProInfo(row){
        let proDesc = row.proDesc;
        this.dialogVisibleDesc = true;
        this.proInfo = row;
      },


      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },

      //页面表单提交
      onSubmit(){

        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.form.tenantId = this.$store.getters.selectedTenantId
            // this.form.proTime = this.form.proTimeStr;

            if (this.dialogTitle == '新增') {
              users.createUsersInfo(this.form).then((res) => {
                console.log(res)
                if (res.status == 200) {
                  this.$notify({
                    title: '成功',
                    message: '添加成功',
                    type: 'success',
                    duration: 2000
                  })
                  this.dialogVisible = false
                  this.getList()

                }
              })

            } else if (this.dialogTitle == '编辑') {

              users.updateUsersInfo(this.form).then((res) => {
                console.log(res)
                if (res.status == 200) {
                  this.$notify({
                    title: '成功',
                    message: '编辑成功',
                    type: 'success',
                    duration: 2000
                  })
                  this.dialogVisible = false
                  this.getList()

                }
              })


            }
          } else {
            console.log('error submit!!')
            return false
          }
        })


      },
      cancel(){
        this.dialogVisible = false;
        this.form = {};
      },
      reset() {
        this.listQuery = {}
        this.getList()
      }
    }
  }
</script>

<style scoped>
  .app-select {
    margin-bottom: 20px;
  }
</style>
